<template>
  <div class="homebox">
    <el-carousel :interval="5000" :height="hh" arrow="always">
      <el-carousel-item
        v-for="item in imgs"
        :key="item.id"
        :style="{ backgroundimage: item.url }"
      >
        <router-link :to="item.path"
          ><img :src="item.url" class="image"
        /></router-link>
      </el-carousel-item>
    </el-carousel>
    <div class="item">
      <div>
        <div class="itemtitle">
          <h4>人体疾病划分/<span>Division of human body diseases</span></h4>
        </div>
        <el-row type="flex">
          <el-col :span="7">
            <div class="huitem">
              <el-row :gutter="10">
                <el-col :span="7" class="bi">
                  <i class="iconfont icon-corpse-full"></i>
                </el-col>
                <el-col :span="17">
                  <h5>|按部位划分</h5>
                  <p>数量：<span class="bi">4</span>个</p>
                  <p>举例：头、颈、躯干、四肢</p>
                </el-col>
              </el-row>
            </div>
            <div class="huitem">
              <el-row :gutter="10" class="yi">
                <el-col :span="7">
                  <i class="iconfont icon-a-xitongdiannaoxitong-05"></i>
                </el-col>
                <el-col :span="17">
                  <h5>|按系统划分</h5>
                  <p>数量：<span class="yi">10</span>个</p>
                  <p>举例：骨骼、循环、内分泌、神经、消化、呼吸</p>
                </el-col>
              </el-row>
            </div>
            <div class="huitem">
              <el-row :gutter="10" class="ri">
                <el-col :span="7">
                  <i class="iconfont icon-zhongyike"></i>
                </el-col>
                <el-col :span="17">
                  <h5>|按中医学划分</h5>
                  <p>
                    数量：<span class="ri">5</span>脏<span class="ri">6</span>腑
                  </p>
                  <p>举例：心、肝、脾、肺、肾；胆、胃、大肠、膀胱</p>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="11" :offset="6" class="imgBox">
            <Body old="home"></Body>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="itemt">
      <div>
        <div class="itemtitlet">
          <h4>“疾病档案”能带给你/<span>"Disease file" can bring you</span></h4>
        </div>
        <el-row type="flex" justify="space-between">
          <el-col :span="6" class="britem" @click.native="knowledge">
            <div class="gi-bg">01</div>
            <h4 class="gi"><i class="iconfont icon-zhishi"></i>疾病知识</h4>
            <p>
              为了方便让用户了解疾病全方位的信息，学习疾病相关知识设立疾病知识区域。
            </p>
            <h5>Disease knowledge</h5>
          </el-col>
          <el-col :span="6" class="britem" @click.native="video">
            <div class="ri-bg">02</div>
            <h4 class="ri"><i class="iconfont icon-video"></i>疾病视频</h4>
            <p>将疾病介绍繁琐的文字可视化，通过视频来更加准确了解疾病信息。</p>
            <p>另有权威医生专门讲解，提供权威的疾病信息与知识。</p>
            <h5>Disease video</h5>
          </el-col>
          <el-col :span="6" class="britem" @click.native="exp">
            <div class="yi-bg">03</div>
            <h4 class="yi">
              <i class="iconfont icon-gongzuojingyan"></i>疾病经验
            </h4>
            <p>
              “疾病档案”特别设立了疾病经验区域，帮助用户交流疾病经验，根据真实经验来了解疾病信息
            </p>
            <h5>Disease experience</h5>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="item">
      <div>
        <div class="itemtitle">
          <h4>疾病经验区/<span>Disease experience area</span></h4>
        </div>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="exitem">
              <h4><span class="yi-bg"></span>发布经验</h4>
              <p>用户通过救治经验与心得，发布属于自己的经验。</p>
            </div>
            <div class="exitem">
              <h4><span class="gi-bg"></span>经验参考</h4>
              <p>
                根据疾病相关的用户经验，来了解实际疾病的情况，可参考性较高。
              </p>
            </div>
            <div class="exitem">
              <h4><span class="bi-bg"></span>交流沟通</h4>
              <p>用户可在经验下方点赞或评论，与发布者沟通交流疾病。</p>
            </div>
          </el-col>
          <el-col :span="15" class="bg" @click.native="exp">
            <img src="../assets/bg01.jpg" alt="" />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="itemg">
      <div>
        <div class="itemtitle">
          <h4>常见疾病入口/<span class="mi">Common disease entrance</span></h4>
        </div>
        <div class="common">
          <span v-for="item in comlist" :key="item.id" @click="disDetail(item.id)">{{
            item.name
          }}</span>
        </div>
        <div class="btn" @click="disSearch">查看更多>></div>
      </div>
    </div>
  </div>
</template>

<script>
import Body from "@/components/Body.vue";
export default {
  components: { Body },
  data() {
    return {
      hh: window.innerHeight - 70 + "px",
      imgs: [
        {
          id: 1,
          url: require("@/assets/banner2_01.png"),
          path: "/main/warehouse",
        },
        {
          id: 2,
          url: require("@/assets/banner2-02.png"),
          path: "/main/warehouse",
        },
        { id: 3, url: require("@/assets/banner2-03.png"), path: "/main/video" },
        {
          id: 4,
          url: require("@/assets/banner2-04.png"),
          path: "/main/experience",
        },
      ],
      comlist: [
        { id: 1, name: "高血压" },
      ],
    };
  },
  created() {
    // console.log(window.innerHeight + "px");
     
    this.bodyList = this.$store.state.home.bodyList;
    this.nowshow = this.bodyList.tou;
    //获取分类树
    this.$store.dispatch("getClassifyTree");
    //获取常见疾病
    this.getDisease()
  },
  methods: {
    //获取疾病
    getDisease() {
      this.$axios({
        method: "get",
        url: "/sickness/getHotSickness",
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.comlist=res.data
        }
      });
    },
    fn1(ss) {
      switch (ss) {
        case "头部":
          this.nowshow = this.bodyList.tou;
          break;
        case "颈部":
          this.nowshow = this.bodyList.jin;
          break;
        case "胸部":
          this.nowshow = this.bodyList.xuong;
          break;
        case "腹部":
          this.nowshow = this.bodyList.fu;
          break;
        case "腰部":
          this.nowshow = this.bodyList.yao;
          break;
        case "生殖部":
          this.nowshow = this.bodyList.shengzhi;
          break;
        case "上肢1":
          this.nowshow = this.bodyList.shangzhi1;
          break;
        case "上肢2":
          this.nowshow = this.bodyList.shangzhi2;
          break;
        case "下肢1":
          this.nowshow = this.bodyList.xiazhi1;
          break;
        case "下肢2":
          this.nowshow = this.bodyList.xiazhi2;
          break;
        case "肝":
          this.nowshow = this.bodyList.gan;
          break;
        case "胆":
          this.nowshow = this.bodyList.dan;
          break;
        case "颅脑":
          this.nowshow = this.bodyList.lunao;
          break;
        case "胃":
          this.nowshow = this.bodyList.wei;
          break;
        case "心脏":
          this.nowshow = this.bodyList.xinzang;
          break;
        case "肺":
          this.nowshow = this.bodyList.fei;
          break;
      }
    },
    knowledge() {
      this.$router.push("/main/knowledge");
    },
    video() {
      this.$router.push("/main/video");
    },
    exp() {
      this.$router.push("/main/experience");
    },
    disDetail(id) {
      this.$router.push("/main/diseasedetails/"+id);
    },
    disSearch() {
      this.$router.push("/main/warehouse");
    },
  },
  mounted() {
    window.onresize = () => {
      this.hh = window.innerHeight - 70 + "px";
    };
  },
};
</script>

<style lang="less" scoped>
@import url("../less/home.less");
@import url("../less/homeKuan.less");
.homebox {
  width: 100%;
  height: calc(100% - 80px);
  & > div {
    height: 100% !important;
  }
  & .el-carousel {
    width: 100%;
    .image {
      height: 100%;
    }
  }
}

.gri-bg {
  color: #9ba5bb !important;
}
.bi {
  color: #1890ff !important;
}
.yi {
  color: #fcc64a !important;
}
.ri {
  color: #ff4402 !important;
}
.gi {
  color: #3eca69 !important;
}
</style>
